<template>
    <div id="WithdrawDeposit">
        <div v-if="listData">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                >  
                <div class="WithdrawDeposit-Box" v-for="(item,index) in listData" :key="index" >
                    <div>
                        <p class="Box-POne">
                            <span>{{item.extractAmount}}</span>
                        </p>
                        <p class="Box-PTwo">
                            <span>手续费：</span>
                            <span>{{item.extractCost}}</span>
                        </p>
                    </div>
                    <div class="Box-name">
                        <div class="Box-nameOne">
                            <span>{{item.extractType==1?'提现中':item.extractType==2?'提现拒绝':item.extractType==3?"提现成功":item.extractType}}</span>
                        </div>
                        <div class="Box-nameImg">
                            <img src="../assets/Mymi/WithdrawDepositImg.png" v-show="item.extractType==2" @click="getShow(item.extractCause)">
                        </div>
                    </div>
                    <div class="Box-Time">
                        <span>{{item.extractCreateTime | dateFmt("YYYY-MM-DD")}}</span>
                    </div>
                </div>
                <div class="Box-Show" v-show="Reason" :style="DepositHeight">
                    <div class ='Box-ShowBox'>
                        <p class="Box-ShowBoxOne">
                            <img src="../assets/Mymi/close.png" @click="getclose">
                        </p>
                        <!-- <p class="Box-ShowBoxTwo">
                            <img src="../assets/Mymi/Reason.png">
                        </p> -->
                        <!-- <p class="Box-ShowBoxThree">
                            <span>提现金额：111</span>
                        </p> -->
                        <p class="Box-ShowBoxFour">
                            <span>{{TextSpan}}</span>
                        </p>
                    </div>
                </div>
            </van-list>  
        </div>
        <div class="ShowDiv" v-else>
            <span>暂时还未有提现记录</span>
        </div>
    </div>
</template>
<script>
import { List } from 'vant'
export default {
    name:"WithdrawDeposit",
    data() {
        return {
            Reason:false,
            spanMoney:"",
            WithdrawDeposituId:"",
            WithdrawDeposit:[],
            TextSpan:"拒绝理由：理由理由理由理由理由 理由理由理由理由理由理由理由理 理由理由理由理由理由",
            DepositTop:false,
            list: [],
            loading: false,
            finished: false,
            listData:[],//获取提现数据
        }
    },
     filters:{
        formatMoney(value){
            return "￥"+ value;
        },
       
        ProofcreateTime (createTime){
            if(!!createTime){
                return createTime.substring(0,10);
            }
            else{
                return '';
            } 
        },//
        //格式化时间
       
    },
    created(){
        this.loadComments();

        this.$axios.post("/cct/extract/userWithdrawal",{}).then(res =>{
            console.log("获取提现记录",res)
            if(res.data.code==0){
                this.listData =res.data.rows;
            }    
        })
    },
    mounted () {
        // 监听页面上下滑动
        window.addEventListener('scroll', this.handleScroll, true)
    },
    computed: {
        DepositHeight(){
            return this.DepositTop ? {height:"100%",top:"0rem"}:{};
        },
        WithdrawMoney(){
            return this.WithdrawDeposit.length == 0 ? false : true;
        },
    },
    methods: {
        //取出村民id
        loadComments() {
        var list = JSON.parse(localStorage.getItem("key"));
        this.WithdrawDeposituId = list.userId;
        },
     
        
        FeeMoney(money,realityMoney){
            let Fee = money-realityMoney
            return Fee.toFixed(2);
        },
        ShowNOState(value){
            if(value == 2){
                return true;
            }
        },
        getShow(val){
            this.Reason = true;
            this.TextSpan =val;
        },
        getclose(){
            this.Reason = false;
        },
        // 判断滑动位置
        handleScroll() {
            var top = Math.floor(document.body.scrollTop || document.documentElement.scrollTop || window.pageXOffset)
            // console.log(top);
            if(top > 88){
                this.DepositTop = true;
            }
            else{
                this.DepositTop = false;
            }
        },
        onLoad() {
            // 异步更新数据
            setTimeout(() => {
                if(this.list.length+10 <= this.WithdrawDeposit.length){
                    for (let i = 0; i < 10; i++) {
                        this.list.push(this.WithdrawDeposit[this.list.length]);
                    }
                    // 加载状态结束
                }
                else if(this.WithdrawDeposit.length < 10){
                    for (let i = 0; i < this.WithdrawDeposit.length; i++) {
                        this.list.push(this.WithdrawDeposit[this.list.length]);
                    }
                }
                else{
                    for (let i = 0; i < 1; i++) {
                        this.list.push(this.WithdrawDeposit[this.list.length]);
                    }
                }
                 this.loading = false;

                    // 数据全部加载完成
                    if (this.list.length >= this.WithdrawDeposit.length) {
                        this.finished = true;
                    }
              
            }, 500);
            // console.log(this.list)
        }
    },

}
</script>
<style lang="less" scoped>
#WithdrawDeposit{
    width: 100%;
    height: auto;
    background: rgb(248, 248, 248);
    .WithdrawDeposit-Box{
        width: 100%;
        height: .92rem;
        display: flex;
        font-family: "PingFang-SC-Medium";
        font-size: 0px;
        
        div{
            width: 100%;
            height: .92rem;
            .Box-POne{
                width: 100%;
                height: .52rem;
                font-size: .34rem;
                line-height:.52rem; 
                span{
                    margin-left: .66rem;
                }
            }
            .Box-PTwo{
                width: 100%;
                height: .32rem;
                font-size: .22rem;
                line-height:.32rem; 
                color: #666666;
                span:nth-child(1){
                    margin-left: .66rem;
                }
                span:nth-child(2){
                    display: inline-block;
                    width: 0px;
                    // background: red;
                }
            }
        }
        .Box-name{
            font-size: .3rem;
            line-height:.92rem; 
            display: flex;
            .Box-nameOne{
                width: 80%;
                height: .92rem;
               span{
                   margin-left: .6rem;
               }
            }
            .Box-nameImg{
                width: 20%;
                height: .92rem;
                // background:blue;
                img{
                    width: .3rem;
                    height: .3rem;
                }
            }
           
        }
        .Box-Time{
            font-size: .2rem;
            text-align: center;
            line-height:.92rem; 
            color: #999999;
        }
    }
    .Box-Show{
        width: 100%;
        height: 12.33rem;
        background: rgba(123,123,123,0.75);
        position: fixed;
        top: 1rem;
        left: 0rem;
        z-index: 10;
        .Box-ShowBox{
            width: 5.2rem;
            height: 4.44rem;
            background: #FFFFFF;
            margin: 50% auto;
            border-radius: 0.2rem; 
            .Box-ShowBoxOne{
                width :100%;
                height: 0.8rem;
                font-size: 0;
                line-height: 0.8rem;
                img{
                    width: 0.4rem;
                    height: 0.4rem;
                    margin-left: 4.6rem;
                }
            }
            .Box-ShowBoxTwo{
                width :100%;
                height: 1.04rem;
                font-size: 0;
                line-height: 1.04rem;
                img{
                    width: 1.04rem;
                    height: 1.04rem;
                    margin-left: 2.1rem;
                    // margin: 0px auto;
                }
            }
            .Box-ShowBoxThree{
                width: 100%;
                height: 1.02rem;
                text-align: center;
                line-height: 1.02rem;
                font-size: 0.36rem;
                color:#666666;
            }
            .Box-ShowBoxFour{
                width: 4.67rem;
                height: 1.03rem;
                margin: 0 auto;
                font-size: 0.31rem;
                word-wrap:break-word;
            }
        }
    }
    .ShowDiv{
        width: 100%;
        height: 0.92rem;
        font-size:0.24rem;
        text-align: center;
        line-height: 0.92rem;
        color: rgb(112, 95, 95);
        background: rgb(248, 248, 248);
    }
}  
</style>